<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AR视频修改密码</title>
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/layout.css" />
<script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
 	 	<script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body class="login">
		<!--标题-->
		<!--登录框-->
		<div class="mainLogin">
			<h3 class="loginTitle">AR视频广告管理系统</h3>
			<form class="form-horizontal" id="loginForm" role="form">
				<div class="form-group">
              		<input type="text" class="form-control" id="username" placeholder="输入用户名" name="username" maxlength="20" >
				</div>
				<!--验证码 -->
				<div class="form-group" style="position: relative;">
					<input id="veryCode" name="veryCode" class="form-control" type="text" placeholder="输入验证码"  maxlength="4"/>
					<img id="imgObj" class="yzmBtn" alt="图片验证码" src="${pageContext.request.contextPath }/xuan/verifyCode" onclick="changeImg()"/> 
				</div>
				<!--短信验证码 -->
				<div class="form-group" style="position: relative;">
					<input type="text" class="form-control two" name="captcha" id="captcha" placeholder="验证码"  maxlength="6" disabled="disabled" />
					<input type="button" id="phone_btn" class="btn" name="phone" value="获取验证码" onclick="showtime(60)" />
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="password" placeholder="输入密码" name="password" maxlength="20" >
				</div>
				<div class="clear"></div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary w100">完成</button>
				</div>
			</form> 
		</div>
		<!--底部-->
		<div class="loginFooter">最终解释权归AR视频所有</div>
		<script src="${pageContext.request.contextPath }/js/myJs.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- md5加密 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.md5.js"></script>
    
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jsbn.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/prng4.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/rng.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/rsa.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/base64.js"></script>
	<script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>
		<script type="text/javascript">
	$().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#loginForm").validate({
            rules: {
            	username: {
                    required: true,
                    maxlength:20
                },
                password: {
                    required: true,
                    maxlength:20
                },
                veryCode: {
                    required: true,
					digits:true,
					rangelength:[4,4]
                },
                phone_btn: {
                    required: true,
					digits:true,
					rangelength:[4,4]
                }
            },
            messages: {
            	username:{
            		required:icon + "请输入用户名",
            		maxlength:icon + "用户名最大长度20"
            		},
            	password: {
            		required:icon + "请输入密码",
            		maxlength:icon + "密码最大长度20"
            		},
            	veryCode: {
            		required:icon + "请输入验证码",
					digits: icon + "请填写正确的验证码",
					rangelength: icon + "请填写正确的验证码"
            		},
           		phone_btn: {
            		required:icon + "请输入短信验证码",
					digits: icon + "请填写正确的短信验证码",
					rangelength: icon + "请填写正确的短信验证码"
           			}
                
            },
    		submitHandler: function(form) {
    			submitPwd();
    		}
        });
    });
	
	
	function submitPwd(){
		$.post("${pageContext.request.contextPath }/login/publicKey",function(data){
			var password = $("#password").val();
			var mobile = $("#username").val();
			var captcha = $("#captcha").val();
			var rsaKey = new RSAKey();
			rsaKey.setPublic(b64tohex(data.modulus), b64tohex(data.exponent));
			password = hex2b64(rsaKey.encrypt(password));
			mobile = hex2b64(rsaKey.encrypt(mobile));
			captcha = hex2b64(rsaKey.encrypt(captcha));
			var datas = {mobile:mobile,captcha:captcha,password:password};
			$.post("${pageContext.request.contextPath }/login/updatePassword",datas,function(data){
				if(data.code == "0"){
					layer.msg(data.message,{time:100000});
					location.href = "${pageContext.request.contextPath }/login/index";
				}else{
					alert(data.message);
					clear();
				}
			})
		});
	}
	
	
	function clear(){
		$("#password").val("");
		$("#username").val("");
		$("#captcha").val("");
	}


	function showtime(t){
		var phone = $("#username").val();
		var code = $("#veryCode").val();
		if(!(/^1[34578]\d{9}$/.test(phone))){
	        $("#username").val("");
	        $("#username").focus();
	        return false; 
	    } 
		$.get("${pageContext.request.contextPath }/common/captcha?mobile="+phone+"&code="+code,function(data){
			if(data.status == "1"){
				layer.alert("系统错误发送失败");
				return false;
			}else if(data.status == "3"){
				layer.alert("手机号码不正确，请重新输入");
				return false;
			}else{
				document.getElementById("phone_btn").disabled=true;
				document.getElementById("captcha").disabled=false;
				for(i=1;i<=t;i++) {
					window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
				}
			}
		})
	}
	function update_p(num,t) {
		if(num == t) {
			document.getElementById("phone_btn").value =" 重新发送";
			document.getElementById("phone_btn").disabled=false;
		}
		else {
			printnr = t-num;
			document.getElementById("phone_btn").value = " (" + printnr +"s)重新发送";
		}
	}
	

	//图片
	function changeImg() {
		var imgSrc = $("#imgObj");
		var src = imgSrc.attr("src");
		imgSrc.attr("src", chgUrl(src));
	}
	//时间戳    
	//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳    
	function chgUrl(url) {
		var timestamp = (new Date()).valueOf();
		urlurl = url.substring(0, 17);
		if ((url.indexOf("&") >= 0)) {
			urlurl = url + "×tamp=" + timestamp;
		} else {
			urlurl = url + "?timestamp=" + timestamp;
		}
		return urlurl;
	}
	</script>
</body>
</html>